<template>
  <div class="banner-wrapper">
    <div class="wrap">
      <div class="slogen"></div>
      <div class="home-scroll">
        <ul style="margin-top: 0px">
          <!-- <li>深圳真实在售二手房 28846 套</li> -->
          <!-- <li>深圳真实在租出租房 43924 套</li>
          <li>深圳真实在售新房楼盘 464 个</li>
          <li>深圳真实小区信息 10961 个</li> -->
        </ul>
      </div>
      <div class="home-search">
        <!-- <div class="search-nav">
          <span class="active">二手房</span>
          <span>租房</span>
          <span>新房</span>
          <span>小区</span>
          <span>学校</span>
        </div> -->
        <div class="search-input clearfix" id="common-search">
          <div class="inputwrap fl">
            <label class="diy-placehd diy-placehd-style"></label>
            <input
              class="search-txt"
              role="search-text"
              type="text"
              placeholder="请输入小区名、地址等开始找房"
              maxlength="50"
            />
          </div>
          <button
            class="search-btn fl"
            role="search-button"
            type="submit"
          ></button>
          <div class="btn-map" @click="topage"><span class="iconfont icon-xiazai18" ></span> 地图</div>
          <ul class="search_result" style="display: none"></ul>
        </div>
      </div>
      <p class="note">
        <!-- <a
          class="a1"
          href="https://www.leyoujia.com/wnsb/index?source=sy"
          target="_blank"
          >乐有家十大承诺、十大保障服务承诺说明</a
        >
        <a class="a2" href="https://www.leyoujia.com/wnsb/wfwg" target="_blank"
          >乐有家坚持经营规范，支持政府打击违法违规行为</a
        > -->
      </p>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const router = useRouter();

    const topage = () => {
      router.push("/map");
    }
    return {
      topage
    }


  },
})
</script>


<style lang="scss">
.banner-wrapper {
  width: 100%;
  min-width: 1200px;
  max-width: 100%;
  height: 640px;
  background: url("https://s1.ljcdn.com/feroot/pc/asset/img/home/bannerV2.jpg") no-repeat left top;
  background-size: 100% 657px;
  background-attachment: fixed;
  position: relative;
  .wrap {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    .slogen {
      width: 1018px;
      height: 90px;
      margin: 140px auto 0;
      background-image: url("https://alicdn.leyoujia.com/images/index/img_slogan3.png");
    }
    .home-scroll {
      height: 25px;
      line-height: 25px;
      margin-top: 3px;
      margin-bottom: 42px;
      overflow: hidden;
      ul {
        list-style: none;
        color: #fafafa;
        text-align: center;
      }
    }
    .home-search {
      width: 705px;
      height: 92px;
      margin: 0 auto;
      padding: 12px 20px;
      .search-nav {
        height: 32px;
        position: relative;
        .active {
          color: #fff;
        }
        span {
          &:hover{
            color: #fff;
          }
          width: 48px;
          height: 22px;
          line-height: 22px;
          margin-right: 30px;
          text-align: center;
          font-size: 16px;
          font-weight: bold;
          color: #ccc;
          white-space: nowrap;
          cursor: pointer;
        }
      }

      .search-input {
        position: relative;
        display: flex;
        background: #fff;
        border-radius: 0 4px 4px 0;
        .inputwrap {
          width: 625px;
          height: 58px;
          position: relative;
          display: flex;
          align-items: center;
          .search-txt {
            width: 585px;
            height: 18px;
            padding: 20px;
            border: none;
            border: 0;
            border-radius: 2px 0 0 2px;
            outline: none;
            font-size: 16px;
            color: #333;
          }
        }
        .btn-map {
          position: absolute;
          right: 100px;
          color: #666;
          top: 28%;
          font-size: 16px;
          cursor: pointer;
          font-weight: bold;
          &:hover{
            color: #3f85ff;
            font-weight: bold;
          }
        }
        .search-btn {
          width: 80px;
          height: 58px;
          background-color: #3f85ff;
          border: 0;
          border-radius: 0 2px 2px 0;
          background-image: url("../../../assets/images/search.png");
          background-position: center center;
          background-repeat: no-repeat;
          cursor: pointer;
        }
      }
    }
  }
}
</style>